﻿@using thousandClear.Areas.Admin.Models;

@model List<OrderModel>

<div id="app">
    <div class="ui-flex ui-box font-center" v-on:tap="back" style="padding: 10px 0px;">
        <div class="ui-flex font-16">
            <span>我的订单</span>
        </div>
    </div>
    <div class="ui-flex" style="height: 20px; background: #fafafa; border: 1px solid #e5e5e5;">

    </div>
    <ul class="ui-flex ui-box">
        @foreach (OrderModel item in Model)
        {
            <li class="ui-flex ui-box" style="padding: 10px; border-radius: 10px;">
                <div class="ui-flex" style="border-radius: 5px; border: 1px solid #dddddd; background: white;">
                    <div class="ui-flex" style="height: 15px; background: #6cc9eb;"></div>
                    <div class="ui-flex ui-box font-12" style="color: #444444; padding: 10px 10px; line-height: 20px;">
                        客户:<span class="font-18">@item.oasName</span>
                    </div>
                    <div class="ui-flex ui-box font-12" style="padding: 0px 10px; line-height: 20px; color: #bbbbbb;">
                        订单号:@item.toSerialNo
                    </div>
                    <div class="ui-flex ui-box font-12" style="padding: 0px 10px; line-height: 20px; color: #bbbbbb;">
                        服务类型:@if (item.type == 1)
                        {
                            <span>
                                单次体验
                            </span>
                        }
                        @if (item.type == 2)
                        {
                            <span>
                                签约季卡(@item.ogsTimeMonth 次)
                            </span>
                        }
                        @if (item.type == 3)
                        {
                            <span>
                                签约半年卡(@item.ogsTimeMonth 次)
                            </span>
                        }
                        @if (item.type == 4)
                        {
                            <span>
                                签约年卡(@item.ogsTimeMonth 次)
                            </span>
                        }
                        @if (item.type == 5)
                        {
                            <span>
                                单项服务
                            </span>
                        }
                        @if (item.type == 6)
                        {
                            <span>
                                签约月卡(@item.ogsTimeMonth 次)
                            </span>
                        }
                        @if (item.type == 7)
                        {
                            <span>
                                按时收费
                            </span>
                        }
                    </div>
                    @if (item.type != 1 && item.type != 5 && item.type != 7)
                    {
                        <div class="ui-flex ui-box font-12" style="padding: 0px 10px; line-height: 20px; color: #bbbbbb;">
                            开卡时长:@item.toSignTime 月
                        </div>
                    }
                    <div class="ui-flex ui-box font-12" style="padding: 0px 10px; line-height: 20px; color: #bbbbbb;">
                        剩余次数:@item.toTime
                    </div>

                    <div class="ui-flex ui-box font-14" style="padding: 10px 10px; line-height: 20px; color: #888888; word-wrap:break-word;">
                        服务地址:@item.oasAddressDetail<br />
                        联系电话:@item.osaPhone
                    </div>
                    <div class="ui-flex ui-box font-14" style="padding: 10px 10px; line-height: 20px; color: #bbbbbb;">
                        <div class="ui-box col60 font-blue">
                            <img style="width: 16px;" src="~/Statics/Images/shop/main/now.png" />@if (item.RowStatus == 4)
                            {
                                <span>未支付</span>
                            }
                            @if (item.RowStatus == 1)
                            {
                                <span>待分配管家</span>
                            }
                            @if (item.RowStatus == 5)
                            {
                                <span>服务中</span>
                            }
                            @if (item.RowStatus == 3)
                            {
                                <span>休眠中</span>
                            }
                        </div>
                        <div class="ui-box col40">
                            @if (item.RowStatus == 4)
                            {
                                <a v-on:tap.stop="refund('@item.toSerialNo')" class="font-white btn font-center" style="width:40px; background: #6cc9eb; float: right; display: block;  border-radius: 10px; padding: 3px 5px;">取消</a>
                                <a v-on:tap.stop="pay('@item.toSerialNo')" class="font-white btn font-center" style="width:40px; float: right; margin-right: 10px; background: #f6b02e; display: block;  border-radius: 10px; padding: 3px 5px;">付款</a>
                            }
                            @if (item.RowStatus == 5 && item.type != 1 && item.type != 5 && item.type != 7)
                            {
                                <a v-on:tap.stop="payTo('@item.toSerialNo')" class="font-white btn font-center" style="background: #6cc9eb; width:40px; float: right; display: block;  border-radius: 10px; padding: 3px 5px;">续约</a>
                                    <div class="font-white btn font-center" style="background: #f6b02e; width:40px; float: right; margin-right: 10px; display: block;  border-radius: 10px; padding: 3px 5px;" v-on:tap="changetoSerialNo('@item.toSerialNo','@item.endDay')">
                                        <span v-on:tap="setDay" class="roro">休眠</span>
                                    </div>

                            }
                            @if (item.RowStatus == 3)
                            {
                                <div class="bg-blue font-white btn font-center" style="width:40px; float: right; display: block;  border-radius: 10px; padding: 3px 5px;" v-on:tap="changetoSerialNo('@item.toSerialNo','0')">
                                    <span class="test" v-on:tap="setDay2">启动</span>
                                </div>
                            }
                        </div>
                    </div>
                    <div class="ui-flex ui-box font-14" style="padding: 10px 10px; line-height: 20px; color: #444444;">
                        <div v-on:tap="detail('@item.toSerialNo')" class="ui-flex" style="border-top: 1px solid #dddddd; padding:10px 0px 0px 0px;">
                            立即查看<img src="~/Statics/Images/shop/main/next.png" style="float: right; height:15px;" />
                        </div>
                    </div>
                </div>
            </li>
        }




        @*@foreach (OrderModel item in Model)
                {
                <li class="ui-flex ui-box" style="padding: 15px;background:#f8fdff; border-bottom: 1px solid white">
                    <div class="ui-flex ui-box">
                        <div class="font-18" style="width:70%; float: left;">
                            @item.oasName<span class="font-12 font-blue">
                                @if (item.type == 1)
                                {
                                    <span>
                                        单次体验
                                    </span>
                                }
                                @if (item.type == 2)
                                {
                                    <span>
                                        签约季卡
                                    </span>
                                }
                                @if (item.type == 3)
                                {
                                    <span>
                                        签约半年卡
                                    </span>
                                }
                                @if (item.type == 4)
                                {
                                    <span>
                                        签约年卡
                                    </span>
                                }
                                @if (item.type == 5)
                                {
                                    <span>
                                        单项服务
                                    </span>
                                }
                                (剩余 @item.toTime 次)  |

                                @if (item.RowStatus == 4)
                                {
                                    <span>未支付</span>
                                }
                                @if (item.RowStatus == 1)
                                {
                                    <span>待分配管家</span>
                                }
                                @if (item.RowStatus == 5)
                                {
                                    <span>服务中</span>
                                }
                                @if (item.RowStatus == 3)
                                {
                                    <span>休眠中</span>
                                }
                            </span>
                        </div>
                        <div class="font-16" style="width:30%; float: left;">@item.osaPhone</div>
                    </div>
                    <div class="ui-flex ui-box font-16" style="color: #9ea0a0;" v-on:tap="detail('@item.toSerialNo')">
                        @item.toSerialNo
                    </div>
                    <div class="ui-flex ui-box font-14" style="color: #9ea0a0;" v-on:tap="detail('@item.toSerialNo')">
                        @item.oasAddressDetail
                        <div style="float: right;">
                            <span class="font-blue" id="day" v-on:tap="detail('@item.toSerialNo')">查看</span>
                        </div>
                    </div>
                    <div class="ui-flex ui-box font-12 font-blue" v-on:tap="detail('@item.toSerialNo')">
                        于 @item.endDay 到期
                    </div>
                    <div class="ui-flex font-14" style="color: #9ea0a0;">
                        <div style="float: right; overflow: hidden;">
                            @if (item.RowStatus == 4)
                            {
                                <span class="font-blue" v-on:tap.stop="refund('@item.toSerialNo')">取消</span>
                                <span class="font-blue" v-on:tap.stop="pay('@item.toSerialNo')">付款</span>
                            }
                            @if (item.RowStatus == 5 && item.type != 1 && item.type != 5)
                            {
                                if (ViewBag.no == "6" || ViewBag.no == "0")
                                {
                                    <span style="display:block; float: left;" class="font-blue" v-on:tap.stop="payTo('@item.toSerialNo')">续约&nbsp;</span>
                                }
                                if (ViewBag.no == "5" || ViewBag.no == "0")
                                {
                                    <div style="float: left;" v-on:tap="changetoSerialNo('@item.toSerialNo','@item.endDay')">
                                        <span v-on:tap="setDay" class="roro font-blue">休眠服务</span>
                                    </div>
                                }

                            }
                            @if (item.RowStatus == 3)
                            {
                                <div style="float: left;" v-on:tap="changetoSerialNo('@item.toSerialNo','0')">
                                    <span class="font-blue test" v-on:tap="setDay2">启动服务</span>
                                </div>
                            }
                        </div>
                    </div>
                </li>
            }*@
    </ul>
    <div style="height: 60px; width: 100%;"></div>
</div>


@section Styles{
    @Styles.Render("~/cssbundles/consumer/list")
    <link href="~/Statics/css/Time.css" rel="stylesheet" />
    <style>
        body {
            background: white;
            font-family: "Microsoft YaHei";
        }
    </style>
}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.parse.min.js"></script>
    <script>
        var model = new Vue({
            el: '#app',
            data: {
                opeid: '@ViewBag.Openid',
                day: '',
                endday: '',
                toSerialNo: '',
                endDay: '',
                endMaxDay: '',
            },

            computed: {


                setDay: function () {
                    var self = this;
                    var yu = new Date();
                    var tt = new Date(yu.getFullYear(), yu.getMonth(), (yu.getDate() + 1));
                    $(".roro").each(function () {
                        $(this).mobiscroll().date({
                            theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                            mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                            display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                            lang: 'zh',       // Specify language like: lang: 'pl' or omit setting to use default
                            dateFormat: "yyyy年MMdd日",
                            minDate: tt,
                            onSelect: function (val, ins) {
                                var selectedDate = ins.getDate();
                                self.day = parseInt(new moment(selectedDate).format('YYYYMMDD'));
                                self.stop();

                            }
                        });
                    });
                },
                setDay2: function () {
                    var self = this;
                    var yu = new Date();
                    var tt = new Date(yu.getFullYear(), yu.getMonth(), (yu.getDate() + 1));
                    $(".test").each(function () {
                        $(this).mobiscroll().date({
                            theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                            mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                            display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                            lang: 'zh',       // Specify language like: lang: 'pl' or omit setting to use default
                            dateFormat: "yyyy年MMdd日",
                            minDate: tt,
                            onSelect: function (val, ins) {
                                var selectedDate = ins.getDate();
                                self.day = parseInt(new moment(selectedDate).format('YYYYMMDD'));
                                self.go();

                            }
                        });
                    });
                },
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                pay: function (idx) {
                    var self = this;
                    window.parent.location.replace("http://www.qianjing-china.com/thousandClear/Shop/Order/Index?openid=@ViewBag.OpenId&" + "order=" + $.trim(idx) + "&p=1");


                },
                detail: function (idx) {
                    var self = this;
                    window.parent.location.replace("http://www.qianjing-china.com/thousandClear/Shop/Order/Index?openid=@ViewBag.OpenId&" + "order=" + $.trim(idx));
                },
                refund: function (idx) {
                    var mes = confirm("确认取消订单吗？")
                    if (mes) {
                        $.ajax({
                            type: "get",
                            url: "../Order/refund/" + idx,
                            contentType: "application/json",
                            success: function (data) {
                                alert("删除成功");
                                window.parent.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx719afdb0aa0ebec4&redirect_uri=http%3a%2f%2fwww.qianjing-china.com%2fthousandclear%2fshop%2fOrder%2fList?n=2&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect");
                            },
                            error: function (a, b) {
                                alert(a.status);
                            }

                        })
                    }
                },
                payTo: function (idx) {

                    window.parent.location.replace("../Sign?openid=@ViewBag.OpenId&" + "order=" + $.trim(idx));
                },
                go: function () {
                    var idx = this.toSerialNo;
                    var mes = confirm("设置启动服务时间为： " + this.day + "？")
                    if (mes) {
                        $.ajax({
                            type: "get",
                            data: {
                                id: idx,
                                enddate: this.day
                            },
                            url: "../Order/go",
                            contentType: "application/json",
                            success: function (data) {

                                alert("启动服务成功");

                                window.parent.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx719afdb0aa0ebec4&redirect_uri=http%3a%2f%2fwww.qianjing-china.com%2fthousandclear%2fshop%2fOrder%2fList?n=2&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect");

                            }

                        })
                    }
                },
                stop: function () {
                    var idx = this.toSerialNo;
                    var mes = confirm("休眠服务将从" + this.day + "开始？")
                    if (mes) {
                        $.ajax({
                            type: "get",
                            data: {
                                id: idx,
                                enddate: this.day
                            },
                            url: "../Order/stop",
                            contentType: "application/json",
                            success: function (data) {
                                if (data == 1) {
                                    alert("休眠成功");
                                    window.parent.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx719afdb0aa0ebec4&redirect_uri=http%3a%2f%2fwww.qianjing-china.com%2fthousandclear%2fshop%2fOrder%2fList?n=2&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect");
                                }
                                else {
                                    alert("该订单您已休眠过一次,无法再次休眠");
                                }
                            },
                            error: function (a, b) {
                                alert(a.status);
                            }

                        })
                    }
                },
                changetoSerialNo: function (idx, endDay) {
                    this.endDay = endDay;
                    this.toSerialNo = idx;


                }
            }
        });
    </script>
}
